import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

export interface ILineProgressProps {
  percent: number; // 0	the percent of the progress
  height?: string;
  color?: string;
  showTextIn?: 'left' | 'center' | 'right';
}

const propTypes = {
  percent: PropTypes.number.isRequired, // 0	the percent of the progress
  height: PropTypes.string,
  color: PropTypes.string,
  showTextIn: PropTypes.oneOf(['left', 'center', 'right']),
};

export const LineProgress: React.SFC<ILineProgressProps> = (props: ILineProgressProps) => {

  const { percent, showTextIn, height } = props;
  const align = showTextIn ? `align-${showTextIn}` : '';
  const progressHeight = height || '1em';
  const halfHeight = (parseFloat(progressHeight) /  2) + '';
  const unit = progressHeight.replace(/^[\d\.]+/g, '');

  return (
    <div
      className="progress progress-line"
      style={{
        height: progressHeight,
        lineHeight: progressHeight,
        borderRadius: progressHeight,
      }}
    >
      <div
        className={classNames('progress-bar', align)}
        style={{
          width: `${ percent > 100 ? 100 : percent }%`,
          borderRadius: progressHeight,
          backgroundColor: props.color,
          padding: `0 ${halfHeight}${unit}`,
        }}
      >{showTextIn ? (percent > 100 ? 100 : percent) + '%' : ''}</div>
    </div>
  );
};

LineProgress.propTypes = propTypes;
